<template>
    <div class="rich-text"
         :style="padding">
        <Hover v-if="hover.showHover"
               :brickInfo="brickInfo"
               :hover="hover"/>
        <div :style="border" class="text-content" v-html="filterHTML"/>
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';

    export default {
        name: 'RichText',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true,
                        isSaved: true
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false,
                        hover: false
                    };
                }
            },
            content: {
                type: Object,
                default: _ => {
                    return {
                        value: '<span style="font-size: 14px;">默认文本</span>'
                    };
                }
            },
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        padding: {
                            top: 10,
                            right: 10,
                            bottom: 10,
                            left: 10
                        },
                        border: {
                            style: 'none',
                            width: 1,
                            radius: '0',
                            color: 'rgba(0, 0, 0, 1)'
                        }
                    };
                }
            }
        },
        components: {
            Hover
        },
        computed: {
            padding() {
                let v = this.appearance.padding;
                return `padding: ${v.top}px ${v.right}px ${v.bottom}px ${v.left}px`;
            },
            border() {
                let v = this.appearance.border;
                return `border: ${v.width}px ${v.style} ${v.color}; border-radius: ${v.radius}px;`;
            },
            filterHTML() {
                return this.content.value.replace(/\s+([^<>]+)(?=<)/g, (match) => {
                    return match.replace(/\s/g, '&nbsp;');
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .rich-text {
        width: 100%;
        min-height: 40px;
        line-height: 1.5;
        box-sizing: border-box;
        padding: 10px 15px;
        user-select: none;
        position: relative;

        .text-content {
            word-wrap: break-word;
        }
    }
</style>
<style lang="scss">
    .rich-text {
        p {
            margin: 0 !important;
        }
    }
</style>
